<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>H+ 后台主题UI框架 - 数据表格</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link rel="shortcut icon" href="${ctx}/favicon.ico">
<link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="${ctx}/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="${ctx}/css/animate.min.css" rel="stylesheet">
<link href="${ctx}/css/style.min862f.css?v=4.1.0" rel="stylesheet">
<!-- Data Tables -->
<link href="${ctx}/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

<link href="${ctx}/css/animate.css" rel="stylesheet">
<link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
<!-- 引入文件上传组件 webuploader 的样式 -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/plugins/webuploader/webuploader.css">
<!-- 全局js -->
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/jquery.form.js"></script>
<script src="${ctx}/js/content.min.js?v=1.0.0"></script>
<script src="${ctx}/js/plugins/iCheck/icheck.min.js"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
<!-- 引入分页插件  -->
<script src="${ctx}/js/bootstrap-paginator.js"></script>

<script src="${ctx}/js/plugins/jeditable/jquery.jeditable.js"></script>

<!-- 引入layer.js插件 -->
<script src="${ctx}/js/plugins/layer2.4/layer.js"></script>


<!-- 引入 文件上传组件 webuploader 的js -->
<script src="${ctx}/js/plugins/webuploader/webuploader.js"></script>


<!-- Data Tables -->
<script src="${ctx}/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="${ctx}/js/plugins/dataTables/dataTables.bootstrap.js"></script>

<!-- 引入日历插件js文件 -->
<script src="${ctx}/js/plugins/layer/laydate/laydate.js"></script>


<!-- 引入弹框插件 layer  -->
<script src="${ctx}/js/plugins/layer/layer.min.js"></script>


<!-- 引入 Jquery.validate.js 表单验证框架 -->
<script src="${ctx}/js/jquery.validate.min.js"></script>
<script src="${ctx}/js/messages_zh.min.js"></script>

<!-- 自定义js -->
<script src="${ctx}/js/content.js?v=1.0.0"></script>
</head>

<body class="gray-bg">

	<div class="col-sm-12">

		<div class="ibox float-e-margins"></div>

		<div class="ibox-content">
			<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper form-inline" role="grid">
				<div class="row">
					<div class="col-sm-6">
						<div class="dataTables_length" id="DataTables_Table_0_length">
							<label>
								每页
								<select id="pageSize" class="form-control input-sm">
									<option value="10">10</option>
									<option value="25">25</option>
									<option value="50">50</option>
									<option value="100">100</option>
								</select>
								条记录 &nbsp;
							</label>
							&nbsp;
							<label>
								<!-- <button onclick="addtask()" class="btn btn-primary btn-sm">添加任务</button>  -->
							</label>
						</div>
					</div>
					<div class="col-sm-6">
						<div id="DataTables_Table_0_filter" class="dataTables_filter">
							<label>
								查找：
								<input class="form-control input-sm" placeholder="请输入标题" id="search" type="search" value="">
							</label>
						</div>
					</div>
				</div>
				<table class="table table-striped table-bordered table-hover dataTables-example"
					id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
					<thead>
						<tr role="row">
							<th class="sorting_asc" tabindex="0"><input type="checkbox" id="delallpagetask">
								&nbsp;
								<button onclick="delpagetask()" class="btn btn-primary btn-sm">批量删除</button></th>
							<th class="sorting_asc" tabindex="0">任务编号</th>
							<th class="sorting_asc" tabindex="0">标题</th>
							<th class="sorting_asc" tabindex="0">截止时间</th>
							<th class="sorting_asc" tabindex="0">执行人员</th>
							<th class="sorting_asc" tabindex="0">任务状态</th>
							<th class="sorting_asc" tabindex="0">紧急程度</th>
							<th class="sorting_asc" tabindex="0">操作</th>
						</tr>
					</thead>
					<tbody id="listFlash">

					</tbody>

				</table>
				<div class="row
						">
					<div class="col-sm-6">
						<div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite"
							aria-relevant="all"></div>
					</div>
					<div class="col-sm-6">
						<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
							<ul id="pagination"></ul>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>


	<!-- 模态对话框 -->
	<div tabindex="-1" class="modal inmodal" id="modal-form" role="dialog" aria-hidden="true"
		style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header"></div>
				<div class="modal-body">
					<div class="row">
						<div class="col-sm-12">
							<h3 class="m-t-none m-b">修改任务</h3>
							<form class="form-horizontal" action="" method="post" id="regForm">
								<!-- 隐藏域:带上用户的id -->
								<input type="hidden" name="id">
								<div class="form-group" id="unameForm">
									<label class="col-sm-3 control-label">标题：</label>
									<div class="col-sm-7">
										<input id="title" readonly="readonly" type="text" name="title" class="form-control">
										<span class="help-block m-b-none" id="titleMsg"></span>
									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-3 control-label">创建时间： </label>
									<div class="col-sm-7">
										<input id="creattime" readonly="readonly" name="creattime"
											class="form-control layer-date laydate-icon">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">截止时间：</label>
									<div class="col-sm-7">
										<input id="fintime" readonly="readonly" name="fintime"
											class="form-control layer-date laydate-icon">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">执行人员：</label>
									<div class="col-sm-7">
										<select disabled="disabled" name="person" id="person" class="form-control m-b">
											<option value="-1">请选择执行人员</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">紧急程度：</label>
									<div class="col-sm-7">
										<input disabled="disabled" type="radio" name="urgent" value="1">
										普通
										<input disabled="disabled" type="radio" name="urgent" value="2">
										紧急
										<input disabled="disabled" type="radio" name="urgent" value="3">
										非常紧急
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">任务内容：</label>
									<div class="col-sm-7">
										<textarea readonly="readonly" rows="5" cols="30" id="content" name="content"
											class="form-control"></textarea>

									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-3 control-label">附件</label>
									<div class="col-sm-7">

										<div id="uploader" class="wu-example">
											<div id="thelist1" class="uploader-list"></div>
											<div class="btns" id="idcard_id1">

												<!-- <div id="picker1">选择附件</div> -->
												<!--<button id="ctlBtn1" type="button" class="btn btn-default">开始上传</button> -->
											</div>
										</div>
										<input type="hidden" id=annex name="annex" />

									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-offset-3 col-sm-8">
										<!--<button class="btn btn-sm btn-primary" id="update_btn" type="submit">修改用户</button> -->
										<button class="btn btn-white" type="button" data-dismiss="modal">关闭</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<small class="font-bold"> </small>
			</div>
			<small class="font-bold"> </small>
		</div>
	</div>



	<script type="text/javascript">
		var pagesize = 10;
		var cp = 1;
		var keyword = '';
	
		$(function() {
			getPerson();
			taskAccept(pagesize, cp, keyword);
	
			//为全选绑定事件delallpagetask
	
			$("#delallpagetask").click(function() {
				if (this.checked) {
					$(":checkbox").each(function() {
						$(this).prop("checked", true);
					})
				} else {
					$(":checkbox").each(function() {
	
						$(this).prop("checked", false);
					})
				}
			});
		});
	
	
		function page(totalPages, currentPage, pagesize, keyword) {
			var element = $("#pagination");
			var options = {
				currentPage : currentPage, //当前页
				totalPages : totalPages, //总页数
				size : "normal",
				bootstrapMajorVersion : 3,
				alignment : "right",
				numberOfPages : 7,
				itemTexts : function(type, page, current) {
					switch (type) {
					case "first":
						return "首页";
					case "prev":
						return "上一页";
					case "next":
						return "下一页";
					case "last":
						return "尾页";
					case "page":
						return page;
					}
				},
				onPageClicked : function(event, originalEvent, type, page) {
					cp = page;
					taskAccept(pagesize, page, keyword);
				}
			}
			element.bootstrapPaginator(options);
	
		}
	
		function taskAccept(pagesize, currentPage, keyword) {
			var totalPage;
			$.get("${ctx}/taskCheck.sxt?cmd=checkTask", {
				pageSize : pagesize,
				currentPage : currentPage,
				keyword : keyword
			}, function(data) {
				totalPage = data.totalPage;
				var str = '';
				var uname = '';
				var style = "";
				var word = "";
				var x = "";
				$.each(data.dataList, function(index, task) {
					str += '<tr id="tr_' + task.id + '" class="gradeA odd">';
					str += '<td class=""><input type="checkbox" value="' + task.id + '"></td>';
					str += '<td class="">' + task.id + '</td>';
					if (typeof (task.title) != "undefined") {
						str += '<td class="">' + task.title + '</td>';
					} else {
						str += '<td class="">暂无</td>';
					}
					if (typeof (task.fintime) != "undefined") {
						str += '<td class="">' + new Date(task.fintime).toLocaleDateString() + '</td>';
					} else {
						str += '<td class="">暂无</td>';
					}
					if (typeof (task.person) != "undefined") {
						uname = "查无此人";
	
						$.each(data.uname, function(index, name) {
							if (typeof (name.value) != "undefined") {
								if (name.key == task.person) {
									uname = name.value;
									return false;
								}
							}
						});
						str += '<td class="">' + uname + '</td>';
					} else {
						str += '<td class="">暂无</td>';
					}
					if (typeof (task.status) != "undefined") {
						if (task.status == 1) {
							style = "color:red";
							word = "未完成";
						} else {
							style = "color:green";
							word = "完成";
						}
						str += '<td class="" style="' + style + '">' + word + '</td>';
					} else {
						str += '<td class="">暂无</td>';
					}
					if (typeof (task.urgent) != "undefined") {
						if (task.urgent == 1) {
							style = "color:blue";
							word = "普通";
						} else if (task.urgent == 2) {
							style = "color:orange";
							word = "紧急";
						} else {
							style = "color:red";
							word = "非常紧急";
						}
						str += '<td class="" style="' + style + '">' + word + '</td>';
					} else {
						str += '<td class="">暂无</td>';
					}
					str += '<td class=""><button onclick="deltask(' + task.id + ')" class="btn btn-danger">删除任务</button>';
					str += '<a id="read_' + task.id + '" onclick="readtask(' + task.id + ')" class="btn btn-info" data-toggle="modal" href="#modal-form">查看任务</a></td>';
					str += '</tr>';
	
				})
	
				$("#listFlash").html(str);
				count = '当前第' + data.currentPage + '页,共' + data.totalPage + '页,共' + data.totalCount + '条记录';
				$("#DataTables_Table_0_info").text(count);
				page(totalPage, currentPage, pagesize, keyword);
	
	
			//另一种因为后台没有刷新输出封了两次json用的eval解释json.
			/* if (data!=null) {
				totalPage = eval("(" + data + ")").totalPage;
			
				var str = '';
				var uname = '';
				var style = "";
				var word = "";
				var x = "";
				$.each(eval("(" + data + ")").dataList, function(index, item) {
			
					str += '<tr id="tr_' + item.id + '" class="gradeA odd">';
					str += '<td class="">' + item.id + '</td>';
			
					if (typeof (item.title) != "undefined") {
						str += '<td class="">' + item.title + '</td>';
					} else {
						str += '<td class="">暂无</td>';
					}
					if (typeof (item.fintime) != "undefined") {
						str += '<td class="">' + new Date(item.fintime).toLocaleDateString() + '</td>';
					} else {
						str += '<td class="">暂无</td>';
					}
					if (typeof (item.person) != "undefined") {
						uname = "查无此人";
						$.each(eval("(" + data + ")").uname, function(num, name) {
							if (typeof (name.value) != "undefined") {
								console.log(name.key);
								if (name.key == item.person) {
									uname = name.value;
									return false;
								}
							}
						});
						str += '<td class="">' + uname + '</td>';
					} else {
						str += '<td class="">暂无</td>';
					}
					if (typeof (item.status) != "undefined") {
						if (item.status == 1) {
							style = "color:red";
							word = "未完成";
						} else {
							style = "color:green";
							word = "完成";
						}
						str += '<td class="" style="' + style + '">' + word + '</td>';
					} else {
						str += '<td class="">暂无</td>';
					}
					if (typeof (item.urgent) != "undefined") {
						if (item.urgent == 1) {
							style = "color:blue";
							word = "普通";
						} else if (item.urgent == 2) {
							style = "color:orange";
							word = "紧急";
						} else {
							style = "color:red";
							word = "非常紧急";
						}
						str += '<td class="" style="' + style + '">' + word + '</td>';
					} else {
						str += '<td class="">暂无</td>';
					}
			
					str += '<td class=""><button onclick="deltask(' + item.id + ')" class="btn btn-danger">删除任务</button>';
			
					str += '<a id="read_' + item.id + '" onclick="readtask(' + item.id + ')" class="btn btn-info" data-toggle="modal" href="#modal-form">查看任务</a></td>';
					str += '</tr>';
			
				});
				$("#listFlash").html(str);
				count = '当前第' + data.currentPage + '页,共' + data.totalPage + '页,共' + data.totalCount + '条记录';
				$("#DataTables_Table_0_info").text(count);
				page(totalPage, currentPage, pagesize, keyword);
			} */
			}, "json");
		}
	
		$("#pageSize").change(function() {
			pagesize = this.value;
			taskAccept(pagesize, 1, keyword);
		});
	
		$("#search").keyup(function(event) {
			if (event.keyCode == 13) {
				keyword = $(this).val();
				taskAccept(pagesize, 1, keyword);
			}
		});
		//查看任务
		function readtask(id) {
			$.get("${ctx}/taskCheck.sxt", {
				cmd : 'checkById',
				id : id
			}, function(data) {
	
				var regForm = $("#regForm")[0];
				if (typeof (data[0].id) != "undefined" && data[0].id != "") {
					regForm.id.value = data[0].id;
				}
				if (typeof (data[0].title) != "undefined" && data[0].title != "") {
					regForm.title.value = data[0].title;
				}
				if (typeof (data[0].person) != "undefined" && data[0].person != "") {
					regForm.person.value = data[0].person;
				}
				if (typeof (data[0].urgent) != "undefined" && data[0].urgent != "") {
					var radios = $("input[type=radio][name='urgent']");
					for (i = 0; i < radios.length; i++) {
						if (radios[i].value == data[0].urgent) {
							radios[i].checked = true;
						}
					}
				}
				if (typeof (data[0].content) != "undefined" && data[0].content != "") {
					regForm.content.value = data[0].content;
				}
				if (typeof (data[0].creattime) != "undefined" && data[0].creattime != "") {
					regForm.creattime.value = new Date(data[0].creattime).toLocaleDateString();
				}
				if (typeof (data[0].fintime) != "undefined" && data[0].fintime != "") {
					regForm.fintime.value = new Date(data[0].fintime).toLocaleDateString();
				}
				if (typeof (data[0].annex) != "undefined" && data[0].annex != "") {
					$("#idcard_id1").html("<br><img  src='${ctx}" + data[0].annex + "' style='width: 150px;height: 150px' />");
				}
	
			}
			);
		}
	
		//添加负责人到模态窗口
		function getPerson() {
			$.get("${ctx}/taskCheck.sxt", {
				cmd : "checkId_Name"
			}, function(data) {
				//拼接<option>标签
				var options = "<option value='-1'>请选择</option>";
				$.each(data, function(index, user) {
					options += "<option value=" + user.id + ">" + user.uname + "</option>";
				});
				//将拼接的options数据设置到省的下拉框中
				$("#person").html(options);
			}, "json");
		}
	
		function deltask(id) {
			layer.confirm('亲,确定要删除此任务?', {
				icon : 3,
				title : '温馨提示'
			}, function(index) {
	
				//获取data-id自定义属性的值
	
				//使用ajax向后台发送删除操作的请求,并带上 删除的id
				$.get("${ctx}/taskCheck.sxt?cmd=deltask", {
					id : id
				}, function(data) {
	
					if (data.code == 1) { //删除成功
						taskAccept(pagesize, cp, keyword);
	
						layer.alert(data.msg, {
							skin : 'layui-layer-molv' //样式类名
						});
					} else { //删除失败
						layer.alert(data.msg, {
							skin : 'layui-layer-molv' //样式类名
						});
					}
					layer.close(index); //关闭当前窗口
				});
			});
		}
	
		//按事务方式批量删除
		function delpagetask() {
			var temp = [];
			$("#listFlash :checked").each(function() {
				temp.push($(this).val());
			});
			var choice = temp.toString();
			if (choice.length != 0) {
				console.log(choice);
				layer.confirm('亲,确定要删除这些任务?', {
					icon : 3,
					title : '温馨提示'
				}, function(index) {
					$.get("${ctx}/taskCheck.sxt?cmd=delpagetask", {
						id : choice
					}, function(data) {
						if (data.code == 1) { //删除成功
							taskAccept(pagesize, cp, keyword);
						} else { //删除失败
							layer.alert(data.msg, {
								skin : 'layui-layer-molv' //样式类名
							});
						}
						layer.close(index); //关闭当前窗口
					});
				});
			}
		}
	</script>

</body>

</html>
